// 要使用 JSX 的语法，则必须引入 react 包
// import React, { Fragment } from 'react'
import React from 'react'
// 将 DOM 节点挂载到页面中
import ReactDOM from 'react-dom'

// 定义一个组件：函数组件
// 函数参数是组件所接收的所有属性表示的对象
const App = props => {
  return (
    <>
      <h1>hello { props.title }</h1>
      <h2>{ props.subtitle }</h2>
    </>
  )
  // return (
  //   <Fragment>
  //     <h1>hello { props.title }</h1>
  //     <h2>{ props.subtitle }</h2>
  //   </Fragment>
  // )
}

// 调用 ReactDOM 的 render() 渲染挂载节点
ReactDOM.render(
  <App title="world" subtitle="副标题" />,
  document.querySelector('#root')
)
